<template>
	<view @click="open">
		<!-- 基础卡片 -->
		<view class="listcard" v-if="item.mode === 'base'">
			<view class="listcard-image">
				<image v-if="item.cover.length" :src="item.cover[0]" mode="aspectFill" :lazy-load="true"></image>
			</view>
			<view class="listcard-content">
				<view class="listcard-content__title">
					<text>{{item.title}}</text>
					<likes :types="types" :item="item"></likes>
				</view>
				<view class="listcard-content__des">
					<view class="listcard-content__des-label">
						<view class="listcard-content__des-label-item">{{item.classify}}</view>
					</view>
					<view class="listcard-content__des-browse">{{item.browse_count}}浏览</view>
				</view>
			</view>
		</view>
	
		<!-- 多图模式 -->
		<view class="listcard mode-column" v-if="item.mode === 'column'">
			<view class="listcard-content">
				<view class="listcard-content__title">
					<text>{{item.title}}</text>
					<likes :types="types" :item="item"></likes>
				</view>
				<view class="listcard-image">
					<view v-if="index < 3" v-for="(image,index) in item.cover" class="listcard-image__item">
						<image :src="image" mode="aspectFill" :lazy-load="true"></image>
					</view>
				</view>
				<view class="listcard-content__des">
					<view class="listcard-content__des-label">
						<view class="listcard-content__des-label-item">{{item.classify}}</view>
					</view>
					<view class="listcard-content__des-browse">{{item.browse_count}}浏览</view>
				</view>
			</view>
		</view>
	
		<!-- 大图模式 -->
		<view class="listcard mode-image" v-if="item.mode === 'image'">
			<view class="listcard-content">
				<view class="listcard-image">
					<image :src="item.cover[0]" mode="aspectFill" :lazy-load="true"></image>
				</view>
				<view class="listcard-content__title">
					<text>{{item.title}}</text>
					<likes :types="types" :item="item"></likes>
				</view>
				<view class="listcard-content__des">
					<view class="listcard-content__des-label">
						<view class="listcard-content__des-label-item">{{item.classify}}</view>
					</view>
					<view class="listcard-content__des-browse">{{item.browse_count}}浏览</view>
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props: {
			item: {
				type: Object,
				default() {
					return {}
				}
			},
			types: {
				type: String,
				default: ''
			}
		},
		methods: {
			// 打开详情事件
			open() {
				const item = this.item
				const params = {
					_id: item._id,
					title: item.title,
					create_time: item.create_time,
					thumbs_up_count: item.thumbs_up_count,
					browse_count: item.browse_count,
					author: item.author
				}
				
				uni.navigateTo({
					url: '/pages/home-detail/home-detail?prams=' + JSON.stringify(params)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.listcard{
		display: flex;
		padding: 20upx;
		margin: 20upx;
		border-radius: 10upx;
		box-shadow: 0 0 10upx 2upx rgba($color: #000000, $alpha: 0.1);
		box-sizing: border-box;
		.listcard-image{
			flex-shrink: 0;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			overflow: hidden;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.listcard-content{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding-left: 20upx;
			width: 100%;
			.listcard-content__title{
				font-size: 28upx;
				color: #333;
				font-weight: 400;
				line-height: 1.2;
				padding-right: 60upx;
				position: relative;
				text{
					/* #ifndef MP-WEIXIN */
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical; 
					/* #endif */
					
					/* #ifdef MP-WEIXIN */
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					align-content: center;
					/* #endif */
				}
				
			}
			.listcard-content__des{
				display: flex;
				justify-content: space-between;
				font-size: 24upx;
				.listcard-content__des-label{
					display: flex;
					.listcard-content__des-label-item{
						padding: 0 10upx;
						margin-right: 10upx;
						border-radius: 30upx;
						border: 1px $mk-base-color solid;
						color: $mk-base-color;
						line-height: 1.5;
					}
				}
			}
		}
		&.mode-column{
			.listcard-content{
				padding-left: 0;
				.listcard-image{
					width: 100%;
					height: 140upx;
					display: flex;
					margin-top: 20upx;
					border-radius: 0;
					.listcard-image__item{
						margin-right: 20upx;
						flex: 1;
						width: 100%;
						border-radius: 10upx;
						overflow: hidden;
						&:last-child{
							margin-right: 0;
						}
					}
				}
				.listcard-content__des{
					margin-top: 20upx;
				}
			}
		}
		&.mode-image{
			.listcard-content{
				padding-left: 0;
				.listcard-image{
					width: 100%;
					height: 200upx;
				}
				.listcard-content__title{
					margin-top: 20upx;
				}
				.listcard-content__des{
					margin-top: 20upx;
				}
			}
		}
	}
</style>
